<template>
  <header
    :class="bindSticky"
    id="app-header"
    :style="{ position: headerPositionStyle }"
  >
    <div class="layout-header">
      <div class="left">
        <h1>
          <img
            @click.stop="navigateTo('/')"
            src="~/assets/images/yindu_logo.png"
            alt="..."
          />
        </h1>
      </div>
      <div class="right h-box h-100">
        <!-- pc nav -->
        <div class="pc-box h-100">
          <div class="navbar">
            <template v-if="globalStore?.navHeaderList">
              <div
                class="nav-item relative pointer"
                v-for="item in globalStore.navHeaderList"
                :key="item.value"
                @click.stop="onClickMenuItem(item)"
                :title="item.title"
                :class="setNavItemActive(item.path)"
              >
                <span>{{ item.title }}</span>
                <i v-if="item.arrow" class="iconfont icon-arrow-down"></i>
                <div class="menu-panel" v-if="item.childsList?.length">
                  <div
                    class="menu-panel-item"
                    v-for="item2 in item.childsList"
                    :key="item2.value"
                    @click.stop="onClickMenuItemChild(item, item2)"
                  >
                    {{ item2.label }}
                  </div>
                </div>
              </div>
            </template>
            <div class="navbar-skeleton" v-else>
              <div class="nav-item" v-for="i in 8" :key="i">
                <Skeleton width="100%" height="100%"></Skeleton>
              </div>
            </div>
          </div>
          <div class="btns h-100">
            <div
              class="btn btn-primary btn-round"
              v-if="!memberStore.profile"
              @click.stop="navigateTo('/login')"
            >
              {{ $t("header.login") }}
            </div>
            <div v-else class="user-logo-outer pointer">
              <div class="user-logo">
                <img
                  class="logo"
                  v-logo-error
                  :src="memberStore.profile?.headimgurl"
                  alt=""
                  v-if="memberStore.profile?.headimgurl"
                />
                <img
                  class="logo"
                  src="~/assets/images/user-logo/default_logo.jpg"
                  alt=""
                  v-else
                />
                <i class="iconfont icon-arrow-down"></i>
                <div class="menu-panel">
                  <div
                    class="menu-panel-item"
                    @click.stop="goto('/new_profile')"
                  >
                    {{ $t("header.enter") }}
                  </div>
                  <div
                    class="menu-panel-item"
                    style="color: #ff4060"
                    @click.stop="logout"
                  >
                    {{ $t("header.logout") }}
                  </div>
                </div>
              </div>
            </div>
            <div
              class="language-select btn btn-default btn-round"
              :class="languagePanelVisible ? 'show-child' : ''"
              @click.stop="onClickTogglePcLanguage"
            >
              <span>{{ languageList[currentLanguageIndex].label }}</span>
              <i class="iconfont icon-arrow-down"></i>
              <Transition name="fadeInDown">
                <div class="menu-panel" v-show="languagePanelVisible">
                  <div
                    class="menu-panel-item"
                    v-for="(item, index) in languageList"
                    :key="item.id"
                    @click.stop="onSelectLanguage(item, index)"
                    :class="index == currentLanguageIndex ? 'active' : ''"
                  >
                    {{ item.label }}
                  </div>
                </div>
              </Transition>
            </div>
          </div>
        </div>

        <!-- mobile nav -->
        <div class="mobile-nav">
          <!-- 语言切换 -->
          <svg
            @click.stop="onClickToggleLanguageNav"
            class="language-switch"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M8.21867 3V4.81128H12V9.99566H8.21867V13H6.70393V9.99566H3V4.81128H6.70393V3H8.21867ZM8.21867 6.2321V8.55314H10.4963V6.2321H8.21867ZM4.48157 8.55314H6.70393V6.2321H4.48157V8.55314Z"
              fill="black"
            />
            <path
              d="M18.2086 18.4427H14.6832L13.9251 21H12L15.3329 11H17.6671L21 21H18.9666L18.2086 18.4427ZM17.7273 16.8504L16.4519 12.5199L15.1644 16.8504H17.7273Z"
              fill="black"
            />
            <path
              d="M4 14V18C4 19.1046 4.89543 20 6 20H10M20 10V6C20 4.89543 19.1046 4 18 4H14"
              stroke="black"
              stroke-width="1.5"
            />
          </svg>
          <!-- language change-panel -->
          <Transition name="slideInRight">
            <div class="yd-drawer">
              <Transition name="fadeIn">
                <div
                  class="yd-drawer-bg"
                  v-show="mobileLanguageNavVisible"
                ></div>
              </Transition>
              <Transition name="slideInRight">
                <div
                  class="yd-drawer-container"
                  @click.stop=""
                  v-show="mobileLanguageNavVisible"
                >
                  <div
                    class="collpase-container mobile-language-nav"
                    @click.stop=""
                  >
                    <div class="nav-list-wrapper">
                      <div class="nav-list">
                        <div
                          class="nav-item"
                          @click="onSelectLanguage(item, index)"
                          v-for="(item, index) in languageList"
                          :key="item.value"
                          :class="index == currentLanguageIndex ? 'active' : ''"
                        >
                          <div class="nav-item__inner">
                            <span>{{ item.label }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </Transition>
            </div>
          </Transition>
          <div class="user-logo" v-if="memberStore.profile">
            <img
              class="logo"
              v-logo-error
              @click.stop="goto('/new_profile')"
              :src="memberStore.profile?.headimgurl"
              alt=""
              v-if="memberStore.profile?.headimgurl"
            />
            <img
              class="logo"
              src="~/assets/images/user-logo/default_logo.jpg"
              alt=""
              v-else
            />
          </div>
          <IconUser
            v-else
            @click.stop="goto('/login')"
            class="mobile-header-icon"
          ></IconUser>
          <IconMenu
            class="mobile-header-icon"
            @click.stop="onClickToggleNav"
          ></IconMenu>
          <Transition name="slideInRight">
            <div class="yd-drawer">
              <Transition name="fadeIn">
                <div class="yd-drawer-bg" v-show="mobileNavVisible"></div>
              </Transition>
              <Transition name="slideInRight">
                <div
                  class="yd-drawer-container"
                  @click.stop=""
                  v-show="mobileNavVisible"
                >
                  <div class="collpase-container" @click.stop="">
                    <div
                      class="nav-list-wrapper"
                      ref="headerMobileNavWrapperRef"
                    >
                      <div class="nav-list">
                        <template v-if="globalStore.navHeaderList">
                          <div
                            class="nav-item"
                            @click.stop="onClickNavItem(item)"
                            v-for="item in globalStore.navHeaderList"
                            :key="item.value"
                            :class="
                              item.path == currentRoutePath ? 'active' : ''
                            "
                          >
                            <div class="nav-item__inner">
                              <span>{{ item.title }}</span>
                            </div>
                            <!-- sub menu -->
                            <div
                              class="sub-nav-container"
                              v-if="item.childsList?.length"
                              :style="{
                                gridTemplateRows: item?.showSubNav
                                  ? '1fr'
                                  : '0fr',
                              }"
                            >
                              <div class="sub-nav">
                                <div
                                  class="sub-nav-item"
                                  v-for="item2 in item.childsList"
                                  :key="item2.value"
                                  @click.stop="
                                    onClickMobileNavItem(item, item2)
                                  "
                                >
                                  {{ item2.label }}
                                </div>
                              </div>
                            </div>
                          </div>
                        </template>
                        <div class="mobile-nav-skeleton" v-else>
                          <div class="nav-item" v-for="i in 7" :key="i">
                            <Skeleton width="100%" height="113px"></Skeleton>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="nav-footer">
                      <a-button
                        @click.stop="navigateTo('/login')"
                        type="primary"
                        size="large"
                        v-if="!memberStore.profile"
                        block
                        >{{ $t("header.login") }}</a-button
                      >
                      <div v-else class="nav-footer-user">
                        <div
                          class="user-info"
                          @click.stop="
                            goto('/new_profile'), (mobileNavVisible = false)
                          "
                        >
                          <img
                            class="logo"
                            v-logo-error
                            :src="memberStore.profile?.headimgurl"
                            alt=""
                            v-if="memberStore.profile?.headimgurl"
                          />
                          <img
                            class="logo"
                            src="~/assets/images/user-logo/default_logo.jpg"
                            alt=""
                            v-else
                          />
                          <span>{{ memberStore.profile.nickname }}</span>
                        </div>
                        <div class="logout" @click.stop="logout">
                          {{ $t("header.exit") }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </Transition>
            </div>
          </Transition>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { postChangeLanguage, postHeaderNav } from "../../../api/api";
import { useMemberStore, useGlobalStore, useCacheStore } from "../../../store";
import { useRouter, useRoute } from "vue-router";
import { postCourseCategory } from "../../../api/aviation";
import { navList } from "./data";
import languageList from "../../../data/languageList";
import {
  getCurrentInstance,
  nextTick,
  onBeforeMount,
  onBeforeUnmount,
  onMounted,
  ref,
  watch,
} from "vue";
import { postTalentCategory } from "../../../api/talent";
import { postRentSaleCategory } from "../../../api/rent";
import { useCookie } from "nuxt/app";
const memberStore = useMemberStore();
const globalStore = useGlobalStore();
const cacheStore = useCacheStore();
const router = useRouter();
const route = useRoute();

const headerPositionStyle = computed(() => {
  let position = "";
  if (mobileNavVisible.value || mobileLanguageNavVisible.value) {
    position = "fixed";
  }
  return position;
});

/**
 * 移动端 语言 切换功能
 */
const mobileLanguageNavVisible = ref(false);
const onClickToggleLanguageNav = () => {
  if (mobileNavVisible.value) mobileNavVisible.value = false;
  mobileLanguageNavVisible.value = !mobileLanguageNavVisible.value;
};

const handlerPageClickEvents = () => {
  languagePanelVisible.value = false;
};
window?.addEventListener("click", handlerPageClickEvents);
onBeforeUnmount(() => {
  window.removeEventListener("click", handlerPageClickEvents);
});

const onClickTogglePcLanguage = () => {
  languagePanelVisible.value = !languagePanelVisible.value;
};

const currentRoutePath = computed(() => {
  return route.path;
});

const setNavItemActive = computed(() => {
  return (path) => {
    return path == route.path ? "active" : "";
  };
});
const languagePanelVisible = ref(false);
const languageShowSubNav = ref(false);

// 导航栏数据
const onClickMenuItem = (item) => {
  if (item.childsList) {
    let firstItem = item.childsList[0];
    goto(item.path, {
      cat_id: firstItem.value,
      type_id: item.id,
      list_type_id: firstItem.type_id,
    });
  } else {
    goto(item.path, { type_id: item.id });
  }
};

const onClickMenuItemChild = (item, item2) => {
  let path = item.path;
  let query = {
    cat_id: item2.value,
    type_id: item.id,
    list_type_id: item2.type_id,
  };
  goto(path, query, true);
};

// 当前语种
const currentLanguageIndex = ref(1);
const onSelectLanguage = async (item: any, index: number) => {
  let res = await postChangeLanguage(item.value);
  if (res.code === 200) {
    const useCookieLang = useCookie("lang");
    useCookieLang.value = item.value;
    currentLanguageIndex.value = index;
    sessionStorage.removeItem("cacheStore");
    location.reload();
  }
};
watch(
  () => memberStore.AppLang,
  (lang) => {
    currentLanguageIndex.value = languageList.findIndex(
      (item) => item.value == lang
    );
  }
);

// 退出登录
let logoutPath = ["/profile", "/member", "/new_profile"];
const logout = () => {
  memberStore.clearProfile();
  logoutPath.forEach((item) => {
    if (route.path.includes(item)) {
      router.push("/");
    }
  });
};

// 需要排除的header固顶的路由页面
let noStickyArray = ["/aviation/detail"];
const bindSticky = computed(() => {
  if (noStickyArray.includes(route.path)) {
    return "";
  } else {
    return "sticky";
  }
});

/**
 * 移动端 导航栏 切换功能
 */
let currentTab = "";
const mobileNavVisible = ref(false);
onMounted(() => {
  window.addEventListener("click", () => {
    // 点击全局关闭导航栏
    if (mobileNavVisible.value) mobileNavVisible.value = false;
    closeAllNav();
  });
});

const initBscroll = () => {
  initMobileScroll([headerMobileNavWrapperRef.value], scrollCache);
};

const headerMobileNavWrapperRef = ref();
let scrollCache: any[] = [];
const onClickToggleNav = () => {
  // 切换导航栏显示
  mobileNavVisible.value = !mobileNavVisible.value;
};

watch(mobileNavVisible, (n) => {
  if (n) {
    document.body.classList.add("no-touch");
  } else {
    if (!cacheStore.touchActionDiabled) {
      document.body.classList.remove("no-touch");
    }
  }
});

const closeAllNav = () => {
  globalStore.navHeaderList?.value?.map((item) => {
    if (typeof item?.showSubNav != "undefined") {
      item.showSubNav = false;
    }
  });
};

const onClickMobileNavItem = (item, item2) => {
  mobileNavVisible.value = false;
};

const onClickNavItem = (item) => {
  
  // if(!item.childsList) {
  goto(
    item.path,
    {
      type_id: item.id,
    },
    true
  );
  mobileNavVisible.value = false;
  // }
  // mobileNavVisible.value = false
  if (currentTab !== item.value) {
    closeAllNav();
  }
  currentTab = item.value;
  if (item.childsList?.length > 0) {
    if (typeof item?.showSubNav == "undefined") {
      item.showSubNav = true;
    } else {
      item.showSubNav = !item.showSubNav;
    }
  }
};
</script>

<style>
.ant-drawer-content-wrapper {
  width: 76.5vw !important;
}
</style>

<style scoped lang="less">
@import url("../styles/media.less");
header {
  background: #fff;
}
.sticky {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.mobile-nav {
  display: none;
  gap: 123px;
  .mobile-header-icon,
  .user-logo img.logo {
    width: 123px;
    height: 123px;
  }
  .collpase-container {
    background-color: #fff;
    overflow-y: auto;
    width: 100vw;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .nav-footer {
      padding: 61px 82px;
      border-top: 1px solid #ced8e0;
      .ant-btn {
        font-size: 72px !important;
        border-radius: 20px !important;
        height: 246px !important;
      }
      .nav-footer-user {
        display: flex;
        font-size: 82px;
        align-items: center;
        justify-content: space-between;
        .user-info {
          border-radius: 200px;
          padding: 31px;
          border: 1px solid #ccd6de;
          display: flex;
          align-items: center;
          gap: 41px;
          span {
            width: 580px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            color: #172026;
          }
        }
        .logout {
          color: #ff4060;
        }
      }
    }
    .nav-list-wrapper {
      height: calc(100vh - var(--yd-header-height) - 368px);
      // overflow: hidden;
      padding: 61px 82px;
      overflow-y: auto;
    }
    .nav-list {
      .nav-item {
        display: flex;
        flex-direction: column;
        padding: 102px 0;
        border-bottom: 1px solid #ced8e0;
        font-size: 72px;
        color: #323232;
        &.active {
          color: var(--yd-primary-color);
        }
        .nav-item__inner {
          display: flex;
          justify-content: space-between;
          align-items: center;
          & > span {
            width: 85vw;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          .icon-arrow-down {
            transition: all 0.5s;
            transform: translateY(20px);
            &.active {
              transform: translateY(-10px) rotate(-180deg);
            }
          }
        }
        .sub-nav-container {
          display: grid;
          grid-template-rows: 0fr;
          overflow: hidden;
          transition: all 0.5s;
        }
        .sub-nav {
          min-height: 0px;
          color: #36434d;
          .sub-nav-item {
            padding: 102px;
            border-bottom: 1px solid #e6edf2;
            &.active {
              color: var(--yd-primary-color);
            }
            &:last-child {
              border-bottom: 0;
              padding-bottom: 0;
            }
          }
        }
      }
    }
  }
  .mobile-language-nav {
    .nav-item {
    }
  }
}
.menu-panel {
  position: absolute;
  right: 0;
  top: 32px;
  padding: 4px;
  background: #ffffff;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid #e6edf2;
  z-index: 9;
  .menu-panel-item {
    padding: 10px 8px;
    min-width: 115px;
    height: 38px;
    border-radius: 8px;
    font-size: 13px;
    color: #36434d;
    white-space: nowrap;
    cursor: pointer;
    &:hover {
      background: #f5f8fa;
    }
  }
}
.language-select {
  &.show-child {
    // background: #fff;
  }
  .menu-panel {
    top: 55px;
    .menu-panel-item {
      width: 161px;
      &.active {
        color: var(--yd-primary-color);
      }
    }
  }
}
.layout-header {
  padding: 0 64px;
  height: var(--yd-header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccd6de;
  background-color: #fff;
  .left {
    display: flex;
    align-items: center;
    gap: 20px;
    h1 {
      font-size: 16px;
      img {
        height: 40px;
      }
    }
  }

  .center {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }

  .right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .pc-box,
    .mobile-nav {
      display: flex;
      align-items: center;
    }
    .pc-box,
    .navbar {
      flex: 1;
    }
    .mobile-nav {
      display: none;
    }
    .navbar {
      display: flex;
      font-size: 16px;
      gap: 32px;
      justify-content: center;
      color: #172026;
      .nav-item {
        padding: 4px 0;
        display: flex;
        align-items: center;
        & > span {
          display: inline-block;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        &:hover {
          .menu-panel {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
          }
        }
        .menu-panel {
          transition: all 0.3s;
          opacity: 0;
          transform: translateY(15px);
          visibility: hidden;
        }
        &:hover {
          color: var(--yd-primary-color);
        }
        &.active {
          color: var(--yd-primary-color);
          font-weight: 600;
          i {
            transform: translateY(-2px) rotate(-180deg);
          }
        }
        i {
          display: inline-block;
          transition: all 0.3s;
          margin-left: 4px;
        }
      }
    }
    .btns {
      display: flex;
      align-items: center;
      .btn-default {
        margin-left: 24px;
        padding-left: 16px;
        padding-right: 80px;
        i {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 8px;
          font-size: 14px;
        }
      }
      .user-logo-outer {
        height: 100%;
        display: flex;
        align-items: center;
        &:hover {
          .user-logo {
            background-color: #fff;
          }
          i {
            transform: translateY(-2px) rotate(-180deg);
          }
          .menu-panel {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
          }
        }
      }
      .user-logo {
        position: relative;
        display: flex;
        align-items: center;
        padding: 5px;
        padding-right: 8px;
        background-color: #fff;
        border-radius: 100px;
        border: 1px solid #e6edf2;
        .menu-panel {
          top: 53px;
          transition: all 0.3s;
          opacity: 0;
          transform: translateY(15px);
          visibility: hidden;
        }
        i {
          transition: all 0.3s;
        }
        .logo {
          width: 36px;
          height: 36px;
          margin-right: 12px;
        }
      }
    }
  }

  ul {
    display: flex;
  }
}

.mobile-nav-skeleton {
  .nav-item {
  }
}

// skeleton
.navbar-skeleton {
  display: flex;
  gap: 32px;
  .nav-item {
    width: 80px;
    height: 30px;
  }
}
</style>
